<template>
    <div class="map_box">
        <div class="map_box1">
            <div class="map_box3"></div>
            <div class="map_box2">
                <p>
                    <van-icon name="location" color="#fff" size="4rem" />
                </p>
            </div>
            <h4>位置</h4>
            <p class="p1">用于获取您当前的定位</p>
           <p>
                <button class="aaaaaa" @click="router.push('/map')">
                    启用位置
                </button>
           </p>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { useRouter } from "vue-router";
const router = useRouter();

</script>

<style lang="scss" scoped>
.map_box {
    width: 100vw;
    height: 100vh;
    background-color: rgb(167, 167, 167);
    overflow: hidden;
}
* {
    margin: 0;
    padding: 0;
}
.map_box1 {
    width: 20rem;
    height: 20rem;
    background-color: white;
    margin: auto;
    margin-top: 10rem;
    border-radius: 20px;
    overflow: hidden;
    position: relative; /* Ensure children can be positioned absolutely */
}
.map_box2 {
    width: 6rem;
    height: 6rem;
    background-color: rgb(255, 190, 76);
    border-radius: 25px;
    overflow: hidden;
    margin: auto;
    margin-top: 1rem;
    position: absolute; /* Positioning to prevent it from moving with map_box3 */
    top: 4rem;
    left: 50%;
    transform: translate(-50%, -50%);
    p {
        text-align: center;
        margin-top: 1rem;
    }
}
@keyframes scaleFade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.map_box3 {
    width: 8rem;
    height: 8rem;
    background-color: rgb(255, 225, 174);
    border-radius: 25px;
    margin: auto;
    margin-top: 1rem;
    overflow: hidden;
    animation: scaleFade 2s infinite;
}
h4{
    text-align: center;
    margin-top: 1rem;
    font-size: 20px;
}
.p1{
    text-align: center;
    margin-top: 1rem;
    color: rgb(129, 136, 152);
}
.aaaaaa{
    width: 15rem;
    margin-top: 1rem;
    height: 3.5rem;
    margin-left: 2.5rem;
    background-color: rgb(255, 190, 76);
    border:none;
    border-radius: 17px;
    color: white;
    font-size: 1.2rem;
}
</style>
